<template>
  <el-drawer v-model="drawer" title="到家订单详情" size="30%">
    <el-form ref="formRef" :model="formData">
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>业务信息</span>
          </div>
        </template>
        <el-form-item label="地址">
          {{ formData.addressDetail }}
        </el-form-item>
        <el-form-item label="康美师">
          {{ formData.userName }}
        </el-form-item>
        <el-form-item label="客户">
          {{ formData.memberName }}
        </el-form-item>
      </el-card>
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>订单信息</span>
          </div>
        </template>
        <el-form-item label="订单金额">
          {{ (formData.price / 100).toFixed(2) }}
        </el-form-item>
        <el-form-item label="车费">
          {{ 1111 }}
        </el-form-item>
        <el-form-item label="订单编号">
          {{ formData.code }}
        </el-form-item>
        <el-form-item label="订单状态">
          <dict-tag :type="DICT_TYPE.MEIJIA_HOME_ORDER_STATUS" :value="formData.status" />
        </el-form-item>
        <el-form-item label="退款原因">
          {{ formData.refundMessage ? JSON.parse(formData.refundMessage).desc : '' }}
        </el-form-item>
      </el-card>
      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>项目信息</span>
          </div>
        </template>
        <el-table :data="formData.orderSubVOList">
          <el-table-column label="项目名称" align="center" prop="projectName" />

          <el-table-column label="项目实收（元）" align="center" prop="name">
            <template #default="scope">
              {{ (scope.row.price / 100).toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="合计">
          {{ (formData.price / 100).toFixed(2) }}
        </el-form-item>
      </el-card>

      <el-card style="max-width: 100%">
        <template #header>
          <div class="card-header">
            <span>分账信息（分账金额{{ (formData.price / 100).toFixed(2) }}元）</span>
          </div>
        </template>
        <el-table :data="formData.divideVOList">
          <el-table-column label="分账角色" align="center">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.MEIJIA_DIVIDE_ROLE" :value="scope.row.role" />
            </template>
          </el-table-column>
          <el-table-column label="分成比例" align="center" prop="name">
            <template #default="scope">
              {{ JSON.parse(scope.row.remark).proportion * 100 }}
            </template>
          </el-table-column>
          <el-table-column label="所得金额（元）" align="center" prop="name">
            <template #default="scope">
              {{ JSON.parse(scope.row.remark).moneyCNY }}
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <template #footer>
      <el-button @click="drawer = false">关闭</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as OrderApi from '@/api/meijia/order'
import type { UploadProps } from 'element-plus'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { getAccessToken, getTenantId } from '@/utils/auth'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
defineOptions({ name: 'StoreOrderDetail' })
const url = import.meta.env.VITE_UPLOAD_URL
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const drawer = ref(false)
const loading = ref(true) // 列表的加载中
const formData = ref({
  avatar: '',
  status: ''
})
const open = async (code: string) => {
  drawer.value = true
  formData.value = await OrderApi.getHomeOrderByCode(code)
}
const headers = ref({
  Authorization: 'Bearer ' + getAccessToken()
})
const handleIdCardOppositeSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {}
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' ) {
    ElMessage.error('Avatar picture must be JPG PNG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('上传照片不能超过5MB!')
    return false
  }
  return true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {})
</script>
